import cs from "classnames";
import styles from "../../index.module.less";
import { map } from "lodash";
import { useState } from "react";

export default () => {
	const cameraList = [{ label: "前" }, { label: "后" }, { label: "左后" }, { label: "右后" }];
	const [isShowCamera, setIsShowCamera] = useState(false);

	const onClose = () => {
		setIsShowCamera(false);
	};

	return (
		<div className={styles.cameraOutContainer}>
            {
                !isShowCamera &&
                <div className={cs(styles.iconContainer)} onClick={() => setIsShowCamera(true)}>
                    <div className={styles.icon, styles.iconBtnCamera}></div>
                </div>
            }
			<div className={cs(styles.cameraPanel, isShowCamera && styles.cameraPanelShow)}>
				<div className={cs(styles.cameraContainer, styles.commonBox)}>
					<div className={styles.moduleHeader}>
						<div className={cs(styles.icon, styles.iconCamera)} onClick={onClose}></div>
						<div className={styles.title}>摄像头</div>
					</div>
					<div className={styles.cameraList}>
						{map(cameraList, (item: any, index: number) => {
							return (
								<div className={styles.cameraItem} key={index}>
									<div className={styles.label}>{item.label}</div>
									<video src="" controls></video>
								</div>
							);
						})}
					</div>
				</div>
			</div>
		</div>
	);
};
